<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个 BS demo</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">

    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
        div {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <!--  row 必须加 要不然两边会少15像素-->
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 pull-right">
            <table class="table table-bordered">
                <table class="table table-hover">
                    <caption>Optional table caption.</caption>
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </table>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div style="padding: 10px 0">
                <button type="button" class="btn btn-default btn-md">
                    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
                </button>
            </div>
        </div>
        <div class="col-md-4">
            <div style="padding: 10px 0">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-lg xxx" data-toggle="modal" >
            Launch demo modal
        </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$('.xxx').on('click',()=>{
    console.log(1);
    setTimeout(function () {
        $('#myModal').modal({
            keyboard: false
        })
    },3000)

})

</script>
</body>
</html>